<template>
  <div class="Dingdan">
    <!-- 头部区域 -->
    <div class="top">
      <el-input
        placeholder="请输入货物名称"
        prefix-icon="el-icon-search"
        v-model="input2"
        @input="myCheck()"
        clearable
      >
      </el-input>
      <el-button type="primary" icon="el-icon-search" @click="Click()"
        >搜索</el-button
      >
    </div>

    <!-- <el-button id="add" type="primary" @click="dialogFormVisible = true"
      >添加订单</el-button
    > -->
    <!-- 添加订单操作表格 -->
    <!-- <el-dialog title="订单信息" :visible.sync="dialogFormVisible">
      <el-form :model="Userform" ref="userForm">
        <el-form-item label="订单名称" label-width="100px">
          <el-input v-model="Userform.name"></el-input>
        </el-form-item>
        <el-form-item label="订单种类" label-width="100px">
          <el-input v-model="Userform.class"></el-input>
        </el-form-item>
        <el-form-item label="订单价格" label-width="100px">
          <el-input v-model="Userform.price"></el-input>
        </el-form-item>
        <el-form-item label="订单数量" label-width="100px">
          <el-input v-model="Userform.num"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="check(Userform)">确 定</el-button>
      </div>
    </el-dialog> -->
    <!-- 编辑表格数据隐藏dialog -->
    <!-- <el-dialog title="订单信息" :visible.sync="dialogFormVisible2">
      <el-form :model="table" ref="userForm2">
        <el-form-item label="订单编号" label-width="100px">
          <el-input v-model="table._id" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="订单名称" label-width="100px">
          <el-input v-model="table.name"></el-input>
        </el-form-item>
        <el-form-item label="订单种类" label-width="100px">
          <el-input v-model="table.class"></el-input>
        </el-form-item>
        <el-form-item label="订单价格" label-width="100px">
          <el-input v-model="table.price"></el-input>
        </el-form-item>
        <el-form-item label="订单数量" label-width="100px">
          <el-input v-model="table.num"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="checked(table)">确 定</el-button>
      </div>
    </el-dialog> -->

    <!-- 主订单数据 -->
    <div class="down" v-if="index2">
      <el-table :data="tableDate" height="570" border style="width: 100%">
        <el-table-column
          prop="name"
          label="订单名称"
          width="220"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="class"
          label="货物种类"
          width="220"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="price"
          label="单价（元）"
          width="220"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="num"
          label="数量（千克，个）"
          width="220"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="person"
          label="订单发起人"
          width="220"
          align="center"
        >
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-button
              size="small"
              style="font-size: 16px; border: 0"
              icon="el-icon-warning-outline"
              @click="changeIcon1(scope.$index, scope.row)"
              >点击完成</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 隐藏查找表格 -->
    <div class="hide" v-else>
      <el-table :data="tableDateHide" height="570" border style="width: 100%">
        <el-table-column
          prop="name"
          label="订单名称"
          width="220"
        ></el-table-column>
        <el-table-column
          prop="class"
          label="货物种类"
          width="220"
        ></el-table-column>
        <el-table-column prop="price" label="单价（元）" width="220">
        </el-table-column>
        <el-table-column prop="num" label="数量（千克，个）" width="220">
        </el-table-column>
        <el-table-column prop="person" label="订单发起人" width="220">
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-button
              size="small"
              style="font-size: 16px; border: 0"
              icon="el-icon-warning-outline"
              @click="changeIcon1(scope.$index, scope.row)"
              >点击完成</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
  
  <script>
export default {
  data () {
    return {
      // dialogFormVisible: false,
      // dialogFormVisible2: false,
      // table: {},
      // Userform: {
      //   name: '',
      //   class: '',
      //   price: '',
      //   num: '',
      //   hj: '',
      //   person: ''
      // },
      // oldData: ''

      // 搜索框的值
      input2: '',
      // 主表单数据
      tableDate: [],
      // 搜索表单数据
      tableDateHide: [],
      // 控制搜索表单显示
      index2: true,
    }
  },
  created () {
    this.myDingdan()
  },
  methods: {
    // 请求订单数据
    myDingdan () {
      const that = this
      this.$http({
        method: 'GET',
        url: '/lk/lk/dingdan',
      }).then(function (response) {
        that.tableDate = response.data.data
        console.log(that.tableDate);
      })
    },
    // 请求查询的数据
    myCheck () {
      if (this.input2 == '') {
        this.index2 = true
      }
      const that = this
      this.$http({
        method: 'POST',
        url: '/lk/lk/check',
        data: {
          name: that.input2
        }
      }).then(function (response) {
        that.tableDateHide = response.data.data
      })
    },
    // 点击搜索后，显示隐藏表单，隐藏表单显示的为要搜索的数据
    Click () {
      if (this.input2 !== '') {
        this.index2 = false
        console.log(this.tableDateHide);
      }
    },
    // 用于删除该行数据
    changeIcon1 (index, row) {
      this.$confirm('此操作不可逆转，确定该订单已完成?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row);
        const that = this
        this.$http({
          method: 'POST',
          url: '/lk/lk/delete',
          data: {
            id: row._id,
            name: row.name,
            class: row.class,
            price: row.price,
            num: row.num,
            person: row.person
          }
        }).then(function (response) {
          that.tableDate.splice(index, 1)
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }



    // 点击添加订单时，要获取的数据
    // check (form) {
    //   const item = JSON.parse(sessionStorage.getItem('user'))
    //   const that = this
    //   this.$http({
    //     method: 'POST',
    //     url: '/lk/lk/add',
    //     data: {
    //       name: form.name,
    //       class: form.class,
    //       price: form.price,
    //       num: form.num,
    //       hj: form.hj,
    //       person: item.username
    //     }
    //   }).then(function (response) {
    //     // console.log(response.data.status);
    //     if (response.data.status == 0) {
    //       that.$message({
    //         message: '创建订单成功',
    //         type: 'success'
    //       })
    //       that.tableDate = response.data.data
    //       that.dialogFormVisible = false
    //       location.reload()
    //     } else if (response.data.status == 1) {
    //       that.$message({
    //         message: response.data.message,
    //         type: 'info'
    //       })

    //       // alert(response.data.message)
    //       that.dialogFormVisible = false
    //     }

    //   })

    // },
    // 用于修改表单数据
    // handleEdit (index, row) {
    //   this.dialogFormVisible2 = true
    //   // 在表单中显示要修改的数据
    //   this.table = row
    //   this.oldData = row.num
    // },
    // 用于修改表单数据
    // checked (form) {
    //   console.log(this.oldData);
    //   // 拿到修改前的数据
    //   const BeforeNum = Number(this.oldData)
    //   // 拿到修改后的数据
    //   const AfterNum = Number(this.table.num)
    //   // 得到中间差
    //   const CenterNum = AfterNum - BeforeNum
    //   this.$http({
    //     method: 'POST',
    //     url: '/lk/lk/revise',
    //     data: {
    //       id: form.id,
    //       name: form.name,
    //       class: form.class,
    //       price: form.price,
    //       num: CenterNum,
    //       number: AfterNum
    //     }
    //   }).then(function (response) { })
    //   this.dialogFormVisible2 = false
    // },
  }
}
  </script>
  
  <style lang="less" scoped>
.top {
  width: 400px;
  float: left;
  .el-input {
    width: 300px;
    margin-bottom: 20px;
  }
  .el-button {
    height: 39px;
  }
}
.Dingdan {
  #add {
    float: right;
  }
}
</style>